<template>
	<view class="examination">
			<ul>
				<li v-for="(item,index) in list.rows">
					<view class="top">
						<span>{{item.title}}</span>
						<span>时长：{{item.expire}}分钟</span>
					</view>
					<view class="center">
						<span>题目总数：{{item.question_count}}</span>
						<span>总分数：{{item.total_score}}</span>
						<span>及格分数：{{item.pass_score}}</span>
					</view>
					<view class="footer">
						<u-button type="success" text="参加考试" class="button" @click="confirm(item.id)" v-if="item.is_test==false"></u-button>
						<u-button type="success" text="你已经考过了" class="button" v-if="item.is_test==true"></u-button>
						<!-- <u-modal :show="show" @confirm="confirm(item)" ref="uModal" @cancel="cancel" showCancelButton title="是否要开始考试"></u-modal> -->
					</view>
				</li>
			</ul>
			
	</view>
</template>

<script>
	import {getTestpaper} from '../request/index.js'
	export default {
		data() {
			return {
				kaoshi:{
					page:1,
					limit:10//总页数
				},
				list:[],
				show:false
			};
		},
		methods:{
			confirm(id){
				uni.showModal({
					title:"确定要参加考试",
					showCancel:true,
					success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url:`/pages/ExamPage/ExamPage?id=${id}`
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
				})
				console.log(id);
				
			},
			cancel(){
				this.show=false
			},
			onReachBottom(){
				console.log(11111);
				this.kaoshi.page++
				getTestpaper(this.kaoshi).then(res=>{
					 this.list=res.data.data
					console.log(this.list);
				})
			},
			onPullDownRefresh(){
				console.log(22222222);
				this.kaoshi.page=1
				getTestpaper(this.kaoshi).then(res=>{
					this.list=res.data.data
					console.log(this.list);
				})
			}
		},
		onLoad(options) {
			getTestpaper(this.kaoshi).then(res=>{
				this.list=res.data.data
				console.log(this.list);
			})
			setTimeout(()=>{
				uni.stopPullDownRefresh ();
			},1000)
		}
	}
</script>

<style lang="scss">
.examination{
	width: 100%;
	height: 100%;
	ul{
		width: 100%;
		height: 100%;
		li{
			width: 100%;
			height: 180px;
			border-bottom: 10px solid #f5f5f3;
			view{
				height: 60px;
				line-height: 60px;
			}
			.top{
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 5px 10px;
				span:nth-child(2){
					color: red;
				}
			}
			.footer{
				padding: 0 20px;
				box-sizing: border-box;
				.button{
					width: 100px;
					float: right;
				}
			}
		}
	}
}
</style>
